<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS_任务五_基础javascript（二）</title>
    <style type="text/css">
        div{
            display: block;
            width: 18px;
            text-align: center;
        }
        .data{
            width: 960px;
        }
        .data>div{
            height: 100px;
            float: left;
            height: 100px;
            display: block;
            margin-left: 5px;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form><input type="text" id="input_text"/></form>
<button id="left_in">左侧入</button>
<button id="right_in">右侧入</button>
<button id="left_out">左侧出</button>
<button id="right_out">右侧出</button>
<button id="sort">排序</button>

<div class="data"></div>
<script>
    function leftIn(queue) {
        var text=document.getElementById('input_text').value;
        if(checkText(text)){
            if(queue.length>60)
            {
                alert('已超出队列元素的数量');
            }
            else
            {
                var div=document.createElement('div');
                var div2=document.createElement('div');
                var div3=document.createElement('div');
                div.innerHTML=text;
                div.appendChild(div2);
                div.appendChild(div3);
                div2.style.height=(100-text)+'px';
                div2.style.backgroundColor="white";
                div3.style.height=text+'px';
                div3.style.backgroundColor="red";
                var divlist=queue.childNodes;
                queue.insertBefore(div,divlist[0]);
             }
        }
    }
    function rightIn(queue) {
        var text=document.getElementById('input_text').value;
        if(checkText(text)){
            var div=document.createElement('div');
            var div2=document.createElement('div');
            var div3=document.createElement('div');
            div.innerHTML=text;
            div.appendChild(div2);
            div.appendChild(div3);
            div2.style.height=(100-text)+'px';
            div2.style.backgroundColor="white";
            div3.style.height=text+'px';
            div3.style.backgroundColor="red";
            queue.appendChild(div);
        }
    }
    function rightOut(queue) {
        var divlist=queue.childNodes;
        queue.removeChild(divlist[divlist.length-1]);
    }
    function leftOut(queue) {
        var divlist=queue.childNodes;
        queue.removeChild(divlist[0]);
    }
    function checkText(text) {
        var reg=/^[-+]?\d+(\.\d+)?$/;
        if(text<10||text>100)
        {
            alert("请输入10-100之间的数字");
            return false;
        }
        else if(!reg.test(text))
        {
            alert("请输入合法数据");
            return false;
        }
        else
            return true;
    }
    function sort(queue) {
       var divlist=queue.childNodes;//queue的直接子元素
        for(var i=0;i<divlist.length;i++)
        for(var j=0;j<divlist.length-i-1;j++)
        {
         if(divlist[j].innerHTML>divlist[j+1].innerHTML)
         {
             var t=divlist[j+1].innerHTML;
             divlist[j+1].innerHTML=divlist[j].innerHTML;
             divlist[j].innerHTML=t;
         }
        }
    }
    function Init() {
        var queue=document.getElementsByClassName('data')[0];
        document.getElementById('left_in').onclick=function () {
            leftIn(queue);
        };
        document.getElementById('right_in').onclick=function () {
            rightIn(queue);
        };
        document.getElementById('left_out').onclick=function () {
            leftOut(queue);
        };
        document.getElementById('right_out').onclick=function () {
            rightOut(queue);
        };
        document.getElementById('sort').onclick=function () {
            sort(queue);
        }
    }
    Init();
</script>
</body>
</html>